<!doctype html>
<!--[if lt IE 7 ]> <html lang="ja" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="ja" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="ja" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="ja" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>jQuery.merge()</title>
	<meta name="description" content="" />
	<meta name="author" content="Y.Nishimura@Office L / nishimuray@gmail.com" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link rel="shortcut icon" href="/favicon.ico" />
	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

	<link rel="stylesheet" href="css/test.style.css?v=1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/modernizr.js"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.6.1.js"><\/script>')</script>
	<script type="text/javascript" src="js/test.script.js"></script>
</head>
<body>

<div id="log">出現順にコンソールログ参照</div>

<a href="http://api.jquery.com/jQuery.merge/">本家ドキュメント</a>

<pre>
// 本家ドキュメントで例示されている、
var newArray = $.merge([], oldArray);

// 一般的（？）なデフォルト値設定の例
var newArray = oldArray || [];
</pre>

<script type="text/javascript">
<!-- 
$(function() {

	// 使い方の例
	var arr1 = [0,1,2,3];
	var arr2 = [4,5,6,7];
	console.log("arr1:%o",arr1);
	console.log("arr2:%o",arr2);
	var arr3 = $.merge(arr1,arr2);
	console.log("arr1:%o",arr1);	// arr1 が更新されてしまうことに注意
	console.log("arr2:%o",arr2);
	console.log("arr3:%o",arr3);	// arr1 と同じになる。

	console.log("-----");

	// ダメな例（連想配列は対象外：本家ドキュメントに配列のみと書いてある）
	var arr4 = {"a":"a1","b":"b1","c":"c1"};
	var arr5 = {"d":"d1","e":"e1","f":"f1"};
	console.log("arr4:%o",arr4);
	console.log("arr5:%o",arr5);
	var arr6 = $.merge(arr4,arr5);
	console.log("arr4:%o",arr4);	// arr1 は更新されない
	console.log("arr5:%o",arr5);
	console.log("arr6:%o",arr6);	// マージもされない

	console.log("-----");

	// ダメな例（スカラーももちろんだめ）
	var arr7 = "abc";
	var arr8 = "def";
	console.log("arr7:%o",arr7);
	console.log("arr8:%o",arr8);
	var arr9 = $.merge(arr7,arr8);
	console.log("arr7:%o",arr7);	// arr1 は更新されない
	console.log("arr8:%o",arr8);
	console.log("arr9:%o",arr9);	// マージもされない

	var arr10 = $.merge([arr7],[arr8]);	// でもこれならOK
	console.log("arr10:%o",arr10);

	var arr11 = $.merge([arr1],[arr2]);	// これは少し困ったことに。
	console.log("arr11:%o",arr11);


	// 配列の初期化例（本家ドキュメント参照）
	var oldArray = [3,4,5];
	var newArray = $.merge([0,1,2], oldArray);	// 第一引数は破壊されてしまうので無名配列で。
	console.log("newArray:" , newArray);

	var oldA = null;	// functionの引数で空だったりした
	var newA = oldA || [0,1,2];	// 一般的な配列初期化、またはデフォルト値の入れ方
	console.log("newA:" , newA);


});
// -->
</script>

</body>
</html>
